<template>
  <div>
    <a-modal  ok-text="确认"
      cancel-text="取消"
      :maskClosable="false"
      :title="title"
      :width="drawerWidth"
      @cancel="handleClose"
      :destroyOnClose="true"
      :visible="visible"
      :confirmLoading="confirmLoading"
      @ok="onSubmit"
    >
      <div
        :style="{
          width: '100%',
          border: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
        }"
      >
        <a-spin :spinning="confirmLoading">
          <a-form-model ref="ruleForm" :model="model" :rules="rules">
            <a-form-model-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="商品"
              prop="goodsCode"
              hasFeedback
            >
              <a-input
                placeholder="请选择商品"
                v-model.trim="model.goodsCode"
                @click="handleDepar"
              />
            </a-form-model-item>

            <a-form-model-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="数量"
              hasFeedback
              prop="amount"
            >
              <a-input-number
                id="inputNumber"
                style="width: 400px;"
                placeholder="请输入数量"
                v-model.trim="model.amount"
                :min="1"
              />
            </a-form-model-item>
          </a-form-model>
        </a-spin>
      </div>
    </a-modal>
    <TableSelectModal
      ref="selectForm"
      :columns="columns"
      :replaceFields="replaceFields"
      :treeKey="treeKey"
      :tableKey="tableKey"
      @tableSelect="tableSelect"
    ></TableSelectModal>
  </div>
</template>

<script>
import api from "@/api/apiServer";
import TableSelectModal from "@/components/TableSelectModal";
import { goodColumns } from "@/pages/ProductionPlan/components/tableConfig";

export default {
  components: { TableSelectModal },
  props: {
    goodsList: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      title: "", // 标题
      visible: false, // 状态、
      drawerWidth: 700, // 抽屉宽度
      model: {
        pickDetailLists: [],
      },
      show: true, //根据菜单类型，动态显示隐藏表单元素
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      form: {
        reserved1: "", //预留1
        reserved2: "", //预留2
        reserved3: "",
      },
      keyId: "",
      rules: {
        goodsCode: [{ required: true, message: "请选择商品!" }],
        amount: [{ required: true, message: "请输入数量!" }],
      },
      columns: goodColumns,
      treeKey: "CommodityTypeFindAll",
      tableKey: "CommodityList",
      replaceFields: {
        children: "goodsTypeList",
        title: "goodsTypeName",
        key: "id",
        value: "id",
      },
    };
  },

  computed: {},
  methods: {
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },

    // 新增
    modalAdd() {
      this.modalEdit({});
    },
    // 编辑
    modalEdit(record) {
      this.resetScreenSize();
      this.visible = true;
      this.model = Object.assign({}, record);
    },

    onChangeMenuType() {},
    // 关闭
    handleClose() {
      this.visible = false;
      this.$refs.ruleForm.resetFields();
    },

    onSubmit() {
      const that = this;
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          that.handleSubmit();
        } else {
          return false;
        }
      });
    },

    async handleSubmit() {
      let res;
      this.confirmLoading = true;
      //根据id判断是修改还是新增
      // if (this.model.id) {
      //   res = await api.PickListInsert(this.model); //修改
      // } else {
      //   res = await api.PickListInsert(this.model); //新增
      // }
      // if (res.code && res.code !== 200) {
      //   this.$message.error(res.message);
      //   this.confirmLoading = false;
      //   return;
      // }
      // this.$message.success(res.message);
      this.confirmLoading = false;

      // 查询商品名称
      for (var item of this.goodsList) {
        if (this.model.goodsCode == item.goodsCode) {
          this.model.goodsName = item.goodsName;
        }
      }
      this.$emit("ok", this.model);
      this.visible = false;
    },

    handleChange() {},

    // 根据屏幕变化,设置抽屉尺寸
    resetScreenSize() {
      let screenWidth = document.body.clientWidth;
      if (screenWidth < 500) {
        this.drawerWidth = screenWidth;
      } else {
        this.drawerWidth = 700;
      }
    },
    handleDepar() {
      this.$refs.selectForm.title = "选择";
      this.$refs.selectForm.modalAdd();
    },
    tableSelect(result) {
      this.$set(this.model, "goodsCode", result[0].goodsCode);
    },
  },
};
</script>

<style></style>
